<template>
	<div class="form-wrapper">
		<!--<form-group :list="formList" :url="url"></form-group>-->

		<Button @click="handleSubmit" type="primary" class="submitBtn">提交</Button>
		<Button @click="handleReset">重置</Button>
		<form-single
			ref="formSingle"
			v-for="(item, index) in formList"
			:key="`form_${index}`"
			:config="item"
			:value-data="valueData"
			:rule-data="ruleData"
			:error-store="errorStore"
		></form-single>
	</div>
</template>

<script>
	import FormGroup from '../components/form-group';
	import formData from "../mock/response/formData";
	import formSingle from '../components/form-single';
	import {sendFormData} from "../api/data";
	import cloneDeep from "clonedeep";

	export default {
		components: {FormGroup, formSingle},
		data() {
			return {
				url: '/data/formData',
				formList: formData,
				valueData: {},
				ruleData: {},
				errorStore: {},
				initValueData: {}
				/*formList: [
					{
						name: 'name',
						type: 'i-input',
						value: '',
						label: '姓名',
						rule: [{required: true, message: 'The name cannot be empty', trigger: 'blur'}]
					},
					{
						name: 'range',
						type: 'slider',
						value: [10, 40],
						range: true,
						label: '范围'
					},
					{
						name: 'sex',
						type: 'i-select',
						value: '',
						label: '性别',
						children: {
							type: 'i-option',
							list: [
								{value: 'man', title: '男'},
								{value: 'female', title: '女'}
							]
						}
					},
					{
						name: 'education',
						type: 'radio-group',
						value: 'bachelor',
						label: '学历',
						children: {
							type: 'radio',
							list: [
								{label: 'bachelor', title: '本科'},
								{label: 'master', title: '研究生'},
								{label: 'doctoral', title: '博士'}
							]
						}
					},
					{
						name: 'skill',
						type: 'checkbox-group',
						value: [],
						label: '技能',
						children: {
							type: 'checkbox',
							list: [
								{label: 'vue', title: 'Vue'},
								{label: 'java', title: 'Java'},
								{label: 'kotlin', title: 'Kotlin'}
							]
						}
					},
					{
						name: 'inWork',
						type: 'i-switch',
						value: true,
						label: '在职'
					}
				]*/
			}
		},
		mounted() {
			let valueData = {};
			let ruleData = {};
			let errorStore = {};
			let initValueData = {};
			formData.forEach(item => {
				valueData[item.name] = item.value;
				ruleData[item.name] = item.rule;
				errorStore[item.name] = '';
				initValueData[item.name] = item.value;
			})
			this.valueData = valueData;
			this.ruleData = ruleData;
			this.errorStore = errorStore;
			this.initValueData = initValueData;
		},
		methods: {
			handleSubmit() {
				let isValid = true;
				this.$refs.formSingle.forEach(item => {
					item.validate(valid => {
						if (!valid) isValid = false;
					});
				});
				if (isValid) {
					sendFormData({url: this.url, data: this.valueData})
						.then(res => this.$emit('on-submit-success', res.data))
						.catch(err => {
							this.$emit('on-submit-error', err);
							for (const key in err) {
								if (err.hasOwnProperty(key)) {
									this.errorStore[key] = err[key];
								}
							}
						});
				}
			},
			handleReset() {
				this.valueData = cloneDeep(this.initValueData);
			}
		}
	}
</script>

<style lang="less">
	.form-wrapper {
		padding: 20px;
	}
</style>
